<template>
  <div class="app-container">
    <!-- <div class="common-wrapper">
      {{ currentDateDynamic }}
    </div> -->

    <!-- 父传子 -->
    <!-- <div>
      <user-com :users="propUser"></user-com>
    </div> -->

    <!-- 子传父 -->
    <!-- <div>
      <to-parent @titleChanged="changeTitle"></to-parent>
      {{ title }}
    </div> -->

    <!-- 插槽 -->
    <slot-test>
      <template v-slot:box-title>
        替换了的title
      </template>

      <!-- 作用域插槽, #是v-slot:的缩写。仅限后续跟有参数使用。 -->
      <template #default="scope">
        {{ scope.user.age }}
      </template>
    </slot-test>
  </div>
</template>

<script>
  import userCom from '../components/ptoc.vue'
  import toParent from '../components/ctop.vue'
  import slotTest from '../components/slot-test.vue'

  import {
    testMixin
  } from '../mixins/testmixin'
  export default {
    mixins: [testMixin],
    data() {
      return {
        test: 'test-item',
        message: 'HELLO',
        currentDateDynamic: 'old',
        title: '父组件原始值',
        propUser: ['张三', '李四', '王五']
      }
    },

    created() {
      this.currentDateDynamic = 'new'
      console.log(testMixin)
      this.hello()
    },



    components: {
      userCom, // 父组件向子组件传值
      toParent, // 子组件向父组件传值
      slotTest
    },

    computed: {
      reverse: function () {
        return this.message.split('').reverse().join('')
      }
    },

    watch: {
      currentDateDynamic: {
        handler(newV, oldV) {
          console.log('currentDynamic变化了', newV, oldV)
        },
        immediate: true,
      }
    },

    methods: {
      changeTitle(e) {
        this.title = e
      }
    }
  }

</script>

<style>

</style>
